<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>09_文本对齐_垂直</title>
    <style>
        #atguigu3 {
            font-size: 50px;
            background-color: yellowgreen;
            height: 150px;
        }
        span  {
            font-size: 20px;
            background-color: orange;
            vertical-align: middle;
        }
        #atguigu4 {
            font-size: 50px;
            background-color: yellowgreen;
            height: 150px;
        }
        img {
            height: 20px;
            vertical-align: middle;
        }
        .san {
            vertical-align: top;
        }
    </style>
</head>
<body>
     <!-- <div id="atguigu3">atguigu尚硅谷让天下没有难掉的头发x<span>x前端</span></div>
     <div id="atguigu4">atguigu尚硅谷让天下没有难掉的头发x<img src="../喜羊羊.jpg" alt="喜羊羊" >
     </div> -->
     <table border="1"  cellspacing="0">
         <caption>标题</caption>
         <thead>
             <tr>
                 <th>姓名</th>
                 <th>年龄</th>
                 <th>性别</th>
             </tr>
         </thead>
         <tbody>
             <tr height="200"  >
                 <td class="san">张三</td>
                 <td>18</td>
                 <td>男</td>
             </tr>
             <tr>
                 <td>李四</td>
                 <td>19</td>
                 <td>女</td>
             </tr>
         </tbody>
     </table>
</body>
</html>